본문으로 건너뛰기

텍스트와 폰트

6. 텍스트와 폰트​

SVG는 단순한 도형뿐만 아니라 텍스트도 포함할 수 있어 그래픽에 설명이나 레이블을 추가하는 데 유용합니다. 이 섹션에서는 SVG에서 텍스트를 추가하고 스타일링하는 방법, 다양한 폰트 속성, 텍스트 변형 및 효과 등에 대해 자세히 알아보겠습니다.

6.1 SVG에서 텍스트 추가하기​

SVG에서 텍스트를 추가하려면 <text> 요소를 사용합니다. <text> 요소는 지정된 위치에 텍스트를 렌더링하며, 다양한 속성을 통해 텍스트의 외관을 조절할 수 있습니다.

<text> 요소와 주요 속성​

  • x, y: 텍스트의 시작 위치를 지정합니다.
  • fill: 텍스트의 색상을 지정합니다.
  • font-size: 텍스트의 크기를 지정합니다.
  • font-family: 텍스트에 사용할 폰트를 지정합니다.
  • font-weight: 텍스트의 두께를 지정합니다.
  • font-style: 텍스트의 스타일을 지정합니다 (normal, italic, oblique).
  • text-anchor: 텍스트의 정렬 방식을 지정합니다 (start, middle, end).

예제: 기본 텍스트 추가​

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 기본 텍스트 -->
  <text x="50" y="100" fill="black" font-size="24" font-family="Arial">
    Hello, SVG!
  </text>
</svg>

6.2 폰트 스타일과 속성​

SVG에서 텍스트의 외관을 더욱 세밀하게 조정하려면 다양한 폰트 스타일과 속성을 사용할 수 있습니다. 이를 통해 텍스트의 크기, 두께, 기울기 등을 변경하거나, 문자 간격과 단어 간격을 조정하여 독특한 디자인을 적용할 수 있습니다. 이 섹션에서는 폰트와 관련된 주요 속성들을 살펴보겠습니다.

주요 폰트 속성​

  • font-family: 텍스트에 사용할 폰트를 지정합니다. 여러 폰트를 쉼표로 구분하여 우선 순위를 설정할 수 있습니다. 브라우저에서 첫 번째 폰트가 사용 가능하지 않을 경우, 그 다음 폰트를 사용합니다.

    • 예시: font-family="Arial, Helvetica, sans-serif"

  • font-size: 텍스트의 크기를 지정합니다. 단위는 px, em, % 등 다양한 단위를 사용할 수 있습니다.

    • 예시: font-size="24px"

  • font-weight: 텍스트의 두께를 지정합니다. normal, bold, bolder, lighter 또는 숫자 값(100~900)을 사용할 수 있습니다.

    • 예시: font-weight="bold"

  • font-style: 텍스트의 기울기를 지정합니다. normal, italic, oblique 값을 사용할 수 있습니다.

    • 예시: font-style="italic"

  • font-variant: 텍스트의 대소문자 변형을 지정합니다. normal, small-caps를 사용할 수 있습니다. small-caps는 소문자를 대문자 스타일로 표시하지만 크기는 소문자 크기입니다.

    • 예시: font-variant="small-caps"

  • letter-spacing: 텍스트 문자 간의 간격을 지정합니다. 기본값은 normal이며, 특정 간격을 설정하려면 픽셀 또는 다른 단위를 사용할 수 있습니다.

    • 예시: letter-spacing="2px"

  • word-spacing: 텍스트 단어 간의 간격을 지정합니다. 단위는 px, em 등을 사용할 수 있습니다.

    • 예시: word-spacing="4px"

예제: 다양한 폰트 스타일 적용​

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 볼드 텍스트 -->
  <text
    x="50"
    y="50"
    fill="darkgreen"
    font-size="24"
    font-family="Georgia"
    font-weight="bold"
  >
    Bold Text
  </text>

  <!-- 이탤릭 텍스트 -->
  <text
    x="50"
    y="100"
    fill="purple"
    font-size="24"
    font-family="Times New Roman"
    font-style="italic"
  >
    Italic Text
  </text>

  <!-- 작은 대문자 텍스트 -->
  <text
    x="50"
    y="150"
    fill="teal"
    font-size="24"
    font-family="Tahoma"
    font-variant="small-caps"
  >
    Small Caps Text
  </text>
</svg>